<template>
  <div class="container" style="width: 95%;margin: 0 auto">
    <site-nav/>
    <div class="top-bar" style="margin: 20px 0">
      <el-input v-model="form.user_id" placeholder="用户id" style="width: 200px;margin-right: 20px"></el-input>
      <el-select v-model="form.level" placeholder="会员等级" style="margin-right: 20px"  clearable >
        <el-option
            v-for="v in levels"
            :key="v.value"
            :label="v.label"
            :value="v.value">
        </el-option>
      </el-select>
      <el-select v-model="form.tag" placeholder="用户标签" style="margin-right: 20px"  clearable >
        <el-option
            v-for="v in tags"
            :key="v.value"
            :label="v.label"
            :value="v.value">
        </el-option>
      </el-select>
      <el-button>筛选</el-button>
    </div>
    <div class="table">
      <el-card class="box-card" >
      <el-table
          :data="tableData"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection">
        </el-table-column>
        <el-table-column
            prop="date"
            label="注册日期"
            sortable>
        </el-table-column>
        <el-table-column
            prop="user_id"
            label="用户id">
        </el-table-column>
        <el-table-column
            prop="num"
            label="总洗车次数"
            sortable>
        </el-table-column>
        <el-table-column
            prop="level"
            label="会员等级">
          <template slot-scope="scope">
          <el-tag
          :type="scope.row.level === '高级会员' ? 'danger' : 'primary'"
          disable-transitions>{{scope.row.level}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="tag"
            label="用户标签">
          <template slot-scope="scope">
          <el-tag
              :type="'success'"
              disable-transitions>{{scope.row.tag}}</el-tag>
          </template>
        </el-table-column>
        <!--<el-table-column-->
            <!--prop="level"-->
            <!--label="会员等级"-->
            <!--:filters="[{ text: '普通会员', value: '普通会员' }, { text: '高级会员', value: '高级会员' }]"-->
            <!--:filter-method="filterTag"-->
            <!--filter-placement="bottom-end">-->
          <!--<template slot-scope="scope">-->
            <!--<el-tag-->
                <!--:type="scope.row.level === '高级会员' ? 'danger' : 'primary'"-->
                <!--disable-transitions>{{scope.row.level}}</el-tag>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button  type="text"@click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-card>
    </div>
    <div class="btn-group">
      <el-button type="danger" style="margin: 20px 0" @click="couponDialogVisible = true">发放优惠券</el-button>
      <el-button type="primary" style="margin: 20px 0" @click="tagDialogVisible = true">更改标签</el-button>
    </div>
    <div class="block" style="float: right;margin-right: 5%;margin-top: 25px">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
      </el-pagination>
    </div>
    <!--发放优惠券弹窗-->
    <el-dialog
        title="选择优惠券"
        :visible.sync="couponDialogVisible"
        width="400px">
      <div v-for="v in coupons" style="margin-bottom: 10px">
        <el-radio v-model="select_coupon" :label="v.id">{{v.title}}</el-radio><br/>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="couponDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="couponDialogVisible = false">发 放</el-button>
  </span>
    </el-dialog>
    <!--更改用户标签弹窗-->
    <el-dialog
        title="选择标签"
        :visible.sync="tagDialogVisible"
        width="400px">
      <div v-for="(v, index) in tags" style="margin-bottom: 10px">
        <el-radio v-model="select_tag" :label="v.value">{{v.label}}</el-radio>
        <span style="float: right;cursor: pointer" @click="deleteTag(index, tags)"><i class="el-icon-delete"></i></span>
      </div>
      <div @click="add_tag_label_visable = true"  v-if="add_tag_label_visable === false" class="add-tag-btn"><i class="el-icon-circle-plus"></i> 添加标签</div>
      <div v-if="add_tag_label_visable === true">
        <el-input v-model="add_tag_label" style="width: 190px;margin-right: 10px" placeholder="不超过8个字"></el-input>
        <el-button  @click="add_tag_label_visable = false">取消</el-button>
        <el-button  @click="addTag">添加</el-button>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="tagDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="tagDialogVisible = false">保 存</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
  import SiteNav from '@/components/SiteNav'

  export default {
  components: {SiteNav},
  data () {
    return {
      couponDialogVisible: false,
      coupons: [
        {
          id: '52',
          title: '3元洗车券'
        },
        {
          id: '18',
          title: '免费洗车券'
        }
      ],
      select_coupon: '', // 发放的优惠券id
      tagDialogVisible: false,
      select_tag: '',
      add_tag_label_visable: false,
      add_tag_label: '',
      form: {
        user_id: '',
        level: '',
        tag: ''
      },
      levels: [{
        value: '1',
        label: '普通会员'
      }, {
        value: '2',
        label: '高级会员'
      }],
      tags: [{
        value: 0,
        label: '无',
        user: '12'
      }, {
        value: 1,
        label: '绿色佳园',
        user: '2'
      }],
      tableData: [{
        date: '2016-05-02',
        user_id: '1414202445',
        level: '普通会员',
        tag: '绿色佳园',
        num: '0'
      }, {
        date: '2016-05-04',
        user_id: '1554240275',
        level: '普通会员',
        tag: '无',
        num: '2'
      }, {
        date: '2016-05-01',
        user_id: '1414553890',
        level: '高级会员',
        tag: '绿色佳园',
        num: '5'
      }, {
        date: '2016-05-03',
        user_id: '2042042556',
        level: '普通会员',
        tag: '绿色佳园',
        num: '1'
      }],
      multipleSelection: []
    }
  },
  methods: {
    formatter (row, column) {
      return row.address
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    addTag () {
      this.tags.push({
        value: this.tags.length + 1,
        label: this.add_tag_label,
        user: '0'
      })
      this.add_tag_label_visable = false
      this.add_tag_label = ''
    },
    deleteTag (index, rows) {
      if (this.tags[index].user !== '0') {
        this.$message.error('标签仍有所属用户时不可删除')
      }
      if (this.tags[index].user === '0') {
        rows.splice(index, 1)
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .btn-group {
    position: absolute;
    left: 5%;
    display: inline-block;
    text-align: left;
  }
  .add-tag-btn {
    cursor: pointer;
    font-size: 15px;
  }
  .add-tag-btn:hover {
    color: #409EFF;
  }
</style>
